<template>
    <div class="outside" id="outside">

        <div class="inside" id="inside">
            <Slide></Slide>
            <Titles></Titles>
            <ul >
                <li>
                    <a href="">
                        <img src="../assets/img/1.jpg" alt="">
                    </a>
                    <div class="insideSpan">
                        <span>【5周年感恩回馈季】KISSBABY感恩回馈</span>
                    </div>
                </li>
                <li>
                    <a href="">
                        <img src="../assets/img/2.jpg" alt="">
                    </a>
                    <div class="insideSpan">
                        <span>直邮—冬季盛典温暖“价”到</span>
                    </div>
                </li>
                <li>
                    <a href="">
                        <img src="../assets/img/3.jpg" alt="">
                    </a>
                    <div class="insideSpan">
                        <span>APP獨家-限定優惠套裝：每日上新</span>
                    </div>
                </li>
                <li>
                    <a href="">
                        <img src="../assets/img/4.jpg" alt="">
                    </a>
                    <div class="insideSpan">
                        <span>日本WPC買一送一優惠套裝</span>
                    </div>
                </li>
                <li>
                    <a href="">
                        <img src="../assets/img/5.jpg" alt="">
                    </a>
                    <div class="insideSpan">
                        <span>Nike毛毛蟲童鞋買一送一優惠套裝</span>
                    </div>
                </li>
                <li>
                    <a href="">
                        <img src="../assets/img/6.jpg" alt="">
                    </a>
                    <div class="insideSpan">
                        <span>KISSBABY新零售 颜如玉</span>
                    </div>
                </li>
            </ul>
            <FooterTitle></FooterTitle>
        </div>
    </div>

</template>

<script>
    import Slide from "./Slide";
    import Titles from './Titles';
    import FooterTitle from './FooterTitle'
    export default {
        components:{Slide,Titles,FooterTitle},
    }
</script>

<style scoped>
    .outside{
        overflow: hidden;
        position: absolute;
        top:.9rem;
        left:0;
        bottom: 0;
        right:0;
    }
    .inside{
        background:whitesmoke;;
        height:auto;
    }
    ul{
        position: relative;
        top: .5rem;
    }
    li{
        height: 3.5rem;
        width: 95%;
        margin-left:0.17rem !important;
        margin-bottom:0.3rem !important;
    }
    li a img{
        width: 100%;
        height: 80%;
    }
    .insideSpan{
        padding-top: .11rem !important;
        padding-bottom: .11rem !important;
        padding-left: .15rem !important;
        border: 1px solid #ccc;
        border-top: none;
        box-shadow: gainsboro 0px 2px 8px 1px;
    }
</style>